<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-content">
        <view class="level-info">
          <text class="level-text">等级 {{ player.level }}</text>
          <view class="exp-bar">
            <view class="exp-fill" :style="{ width: (player.exp / nextLevelExp()) * 100 + '%' }"></view>
            <text class="exp-text">{{ player.exp }}/{{ nextLevelExp() }}</text>
          </view>
        </view>
        <view class="hp-info">
          <text class="hp-text">HP {{ player.hp }}/{{ player.maxHp }}</text>
          <view class="hp-bar">
            <view class="hp-fill" :style="{ width: (player.hp / player.maxHp) * 100 + '%' }"></view>
          </view>
        </view>
        <view class="player-stats">
          <text class="stat">攻 {{ player.attack }}</text>
          <text class="stat">防 {{ player.defense }}</text>
          <text class="stat gold">金 {{ player.gold }}</text>
        </view>
      </view>
    </view>

    <!-- 战斗区域 -->
    <view class="battle-area" v-if="currentMonster">
      <view class="monster-info">
        <text class="monster-name">{{ currentMonster.name }} Lv.{{ currentMonster.level }}</text>
        <view class="monster-hp-bar">
          <text class="hp-text">HP: {{ currentMonster.hp }}/{{ currentMonster.maxHp }}</text>
          <view class="hp-bar-bg">
            <view class="hp-bar-fill" :style="{ width: (currentMonster.hp / currentMonster.maxHp) * 100 + '%' }"></view>
          </view>
        </view>
        <view class="monster-stats-row">
          <text class="monster-stat">攻击: {{ currentMonster.attack }}</text>
          <text class="monster-stat">防御: {{ currentMonster.defense }}</text>
        </view>
      </view>

      <view class="battle-field">
        <!-- 战斗场景装饰 -->
        <view class="battle-decorations">
          <view class="decoration left-rocks"></view>
          <view class="decoration right-rocks"></view>
          <view class="decoration ground-texture"></view>
        </view>

        <!-- 玩家角色 -->
        <view class="battle-positions">
          <view class="player-position">
            <view class="player-character" :class="{
              'player-attack': isPlayerAttacking, 
              'player-hit': isPlayerHit,
              'player-skill': isUsingSkill
            }">
              <view class="character-shadow"></view>
              <image class="character-sprite" src="https://cdn-icons-png.flaticon.com/512/1785/1785210.png" mode="aspectFit"></image>
              <view v-if="showPlayerEffect" :class="['attack-effect', 'player-effect', {'skill-slash': isUsingSkill}]"></view>
            </view>
          </view>

          <!-- 怪物 -->
          <view class="monster-position">
            <view class="monster-character" :class="{
              'monster-hit': isMonsterHit, 
              'monster-attack': isMonsterAttacking, 
              'monster-death': isMonsterDying
            }">
              <view class="character-shadow"></view>
              <image class="monster-sprite" :src="getMonsterImage(currentMonster.icon)" mode="aspectFit"></image>
              <view v-if="showMonsterEffect" class="attack-effect monster-effect"></view>
              <view v-if="showSkillEffect" class="skill-effect" :class="currentSkillEffect"></view>
            </view>
          </view>
        </view>
      </view>

      <view class="battle-controls">
        <button class="battle-btn attack" @click="attack" :disabled="isAttacking || isUsingSkill" :class="{'attacking': isAttacking}">
          <view class="btn-content">
            <text class="btn-text">攻击</text>
          </view>
        </button>
        <button class="battle-btn skill" @click="useSkill" :disabled="skillCooldown > 0 || isAttacking || isUsingSkill" :class="{'skill-active': isUsingSkill}">
          <view class="btn-content">
            <text class="btn-text">{{ getCurrentSkillName() }}</text>
            <text class="cooldown-text" v-if="skillCooldown > 0">({{ skillCooldown }}s)</text>
            <text class="ready-text" v-else>就绪</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 主要功能按钮 -->
    <view class="action-buttons">
      <view class="btn-row">
        <button class="game-btn" @click="startBattle">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/sword-brandish.svg" mode="aspectFit"></image>
          <text>战斗</text>
        </button>
        <button class="game-btn" @click="openShop">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/shop.svg" mode="aspectFit"></image>
          <text>商店</text>
        </button>
      </view>
      <view class="btn-row">
        <button class="game-btn" @click="openInventory">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/backpack.svg" mode="aspectFit"></image>
          <text>背包</text>
        </button>
        <button class="game-btn" @click="openSkills">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/skills.svg" mode="aspectFit"></image>
          <text>技能</text>
        </button>
      </view>
      <view class="btn-row">
        <button class="game-btn" @click="openCraft">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/anvil.svg" mode="aspectFit"></image>
          <text>合成</text>
        </button>
        <button class="game-btn" @click="openAchievements">
          <image class="btn-icon" src="https://game-icons.net/icons/ffffff/000000/1x1/delapouite/trophy.svg" mode="aspectFit"></image>
          <text>成就</text>
        </button>
      </view>
    </view>

    <!-- 背包面板 -->
    <view v-if="isInventoryOpen" class="panel inventory">
      <view class="panel-header">
        <text class="panel-title">背包</text>
        <text class="panel-subtitle">已装备</text>
      </view>
      <view class="equipment-slots">
        <view class="equip-slot" v-for="(slot, index) in player.equipment" :key="index">
          <view class="slot-item" v-if="slot.item">
            <image class="item-icon" :src="getItemImage(slot.item.icon)" mode="aspectFit"></image>
            <text class="item-name">{{ slot.item.name }}</text>
            <text class="item-stats">{{ getItemStats(slot.item) }}</text>
            <button class="unequip-btn" @click="unequipItem(index)">卸下</button>
          </view>
          <text v-else class="empty-slot">{{ slot.type }}</text>
        </view>
      </view>
      <view class="inventory-items">
        <view v-for="(item, index) in player.inventory" :key="index" class="inventory-item">
          <image class="item-icon" :src="getItemImage(item.icon)" mode="aspectFit"></image>
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-stats">
              {{ getItemStats(item) }}
              <text v-if="compareEquipment(item)" :class="{'better-stats': compareEquipment(item) === 'better', 'worse-stats': compareEquipment(item) === 'worse'}">
                {{ compareEquipment(item) === 'better' ? ' ↑' : ' ↓' }}
              </text>
            </text>
          </view>
          <button class="use-btn" @click="useItem(index)" :class="{'better-item': compareEquipment(item) === 'better'}">
            {{ item.type === 'equipment' ? '装备' : '使用' }}
          </button>
        </view>
      </view>
      <button class="close-btn" @click="closeInventory">关闭</button>
    </view>

    <!-- 商店面板 -->
    <view v-if="isShopOpen" class="panel shop">
      <view class="panel-header">
        <text class="panel-title">商店</text>
        <text class="gold-display">金币: {{ player.gold }}</text>
      </view>
      <view class="shop-items">
        <view v-for="(item, index) in shopItems" :key="index" class="shop-item">
          <image class="item-icon" :src="getItemImage(item.icon)" mode="aspectFit"></image>
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-desc">{{ item.description }}</text>
            <text class="item-price">{{ item.price }} 金币</text>
          </view>
          <button class="buy-btn" @click="buyItem(index)" :disabled="player.gold < item.price">购买</button>
        </view>
      </view>
      <button class="close-btn" @click="closeShop">关闭</button>
    </view>

    <!-- 合成面板 -->
    <view v-if="isCraftOpen" class="panel craft">
      <view class="panel-header">
        <text class="panel-title">物品合成</text>
      </view>
      <view class="craft-categories">
        <text v-for="(category, index) in craftCategories" 
              :key="index"
              :class="['category-tab', {'active': currentCraftCategory === category}]"
              @click="currentCraftCategory = category">
          {{ category }}
        </text>
      </view>
      <view class="craft-recipes">
        <view v-for="(recipe, index) in filteredRecipes" 
              :key="index" 
              class="craft-recipe">
          <view class="recipe-result">
            <image class="item-icon" :src="getItemImage(recipe.result.icon)" mode="aspectFit"></image>
            <view class="item-info">
              <text class="item-name">{{ recipe.result.name }}</text>
              <text class="item-desc">{{ recipe.result.description }}</text>
            </view>
          </view>
          <view class="recipe-materials">
            <view v-for="(material, mIndex) in recipe.materials" 
                  :key="mIndex" 
                  class="material-item"
                  :class="{'material-insufficient': !hasSufficientMaterial(material)}">
              <image class="material-icon" :src="getItemImage(material.icon)" mode="aspectFit"></image>
              <text class="material-count">
                {{ getMaterialCount(material.id) }}/{{ material.count }}
              </text>
            </view>
          </view>
          <button class="craft-btn" 
                  @click="craftItem(recipe)"
                  :disabled="!canCraftItem(recipe)">
            合成
          </button>
        </view>
      </view>
      <button class="close-btn" @click="closeCraft">关闭</button>
    </view>

    <!-- 技能面板 -->
    <view v-if="isSkillsOpen" class="panel skills">
      <view class="panel-header">
        <view class="header-left">
          <text class="panel-title">技能</text>
          <text class="skill-points">技能点: {{ player.skillPoints }}</text>
        </view>
      </view>
      
      <view class="skills-list">
        <view v-for="(skill, index) in skills" :key="index" class="skill-item">
          <view class="skill-icon-wrapper" :class="{'skill-max': skill.level >= skill.maxLevel}">
            <image class="skill-icon" :src="getSkillImage(skill.icon)" mode="aspectFit"></image>
            <text class="skill-level">Lv.{{ skill.level }}</text>
          </view>
          <view class="skill-info">
            <text class="skill-name">{{ skill.name }}</text>
            <text class="skill-desc">{{ getSkillDescription(skill) }}</text>
            <text class="skill-level-text">等级: {{ skill.level }}/{{ skill.maxLevel }}</text>
          </view>
          <button class="upgrade-btn" 
                  @click="upgradeSkill(index)" 
                  :disabled="player.skillPoints <= 0 || skill.level >= skill.maxLevel"
                  :class="{'btn-disabled': player.skillPoints <= 0 || skill.level >= skill.maxLevel}">
            升级
          </button>
        </view>
      </view>
      
      <view class="panel-footer">
        <button class="close-btn" @click="closeSkills">关闭</button>
      </view>
    </view>

    <!-- 战斗结果弹窗 -->
    <view v-if="showBattleResult" class="battle-result">
      <view class="result-content">
        <text class="result-title">{{ battleWon ? '战斗胜利！' : '战斗失败！' }}</text>
        <view class="rewards" v-if="battleWon">
          <text>获得经验: {{ battleRewards.exp }}</text>
          <text>获得金币: {{ battleRewards.gold }}</text>
          <view v-if="battleRewards.items.length > 0">
            <text>获得物品:</text>
            <text v-for="(item, index) in battleRewards.items" :key="index">
              {{ item.name }}
            </text>
          </view>
        </view>
        <button class="confirm-btn" @click="closeBattleResult">确定</button>
      </view>
    </view>

    <!-- 职业选择面板 -->
    <view v-if="isClassSelectOpen" class="panel class-select">
      <view class="panel-header">
        <text class="panel-title">选择职业</text>
      </view>
      <view class="class-options">
        <view class="class-option" 
              v-for="classInfo in classes" 
              :key="classInfo.id"
              :class="{'selected': player.class === classInfo.id}"
              @click="selectClass(classInfo.id)">
          <image class="class-icon" :src="classInfo.icon" mode="aspectFit"></image>
          <view class="class-info">
            <text class="class-name">{{ classInfo.name }}</text>
            <text class="class-desc">{{ classInfo.description }}</text>
            <view class="class-stats">
              <text v-for="(stat, index) in classInfo.stats" 
                    :key="index" 
                    class="stat-text">
                {{ stat }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <button class="confirm-btn" @click="confirmClass" :disabled="!player.class">确认选择</button>
    </view>

    <!-- 天赋树面板 -->
    <view v-if="isTalentOpen" class="panel talents">
      <view class="panel-header">
        <text class="panel-title">天赋树</text>
        <text class="talent-points">天赋点数: {{ player.talentPoints }}</text>
      </view>
      <view class="talent-tabs">
        <text v-for="tab in talentTabs" 
              :key="tab.id"
              :class="['tab-item', {'active': currentTalentTab === tab.id}]"
              @click="currentTalentTab = tab.id">
          {{ tab.name }}
        </text>
      </view>
      <view class="talent-grid">
        <view v-for="(talent, index) in currentTalents" 
              :key="index"
              class="talent-node"
              :class="{
                'available': canLearnTalent(talent),
                'maxed': isTalentMaxed(talent),
                'locked': !canLearnTalent(talent)
              }">
          <image class="talent-icon" :src="getTalentIcon(talent)" mode="aspectFit"></image>
          <view class="talent-info">
            <text class="talent-name">{{ talent.name }}</text>
            <text class="talent-level">{{ getTalentLevel(talent) }}/{{ talent.maxLevel }}</text>
            <text class="talent-desc">{{ getTalentDescription(talent) }}</text>
          </view>
          <button class="learn-btn" 
                  @click="learnTalent(talent)"
                  :disabled="!canLearnTalent(talent) || player.talentPoints <= 0">
            学习
          </button>
        </view>
      </view>
      <button class="close-btn" @click="closeTalents">关闭</button>
    </view>

    <!-- 成就面板 -->
    <view v-if="isAchievementsOpen" class="panel achievements">
      <view class="panel-header">
        <view class="header-content">
          <text class="panel-title">成就系统</text>
          <text class="achievement-stats">已完成: {{ player.achievements.length }}/{{ achievements.length }}</text>
        </view>
        <button class="close-btn" @click="closeAchievements">×</button>
      </view>
      
      <scroll-view class="achievements-list" scroll-y>
        <view class="achievements-grid">
          <view v-for="(achievement, index) in achievements" 
                :key="index" 
                class="achievement-item"
                :class="{'achieved': player.achievements.includes(achievement.id)}">
            <view class="achievement-content">
              <view class="achievement-header">
                <view class="achievement-icon-wrapper">
                  <image class="achievement-icon" :src="getAchievementIcon(achievement)" mode="aspectFit"></image>
                  <view v-if="player.achievements.includes(achievement.id)" class="achievement-complete">✓</view>
                </view>
                <text class="achievement-name">{{ achievement.name }}</text>
              </view>
              <text class="achievement-desc">{{ achievement.description }}</text>
              <view class="achievement-rewards">
                <text class="reward-text" v-if="achievement.reward.gold">
                  <text class="reward-icon">🪙</text> +{{ achievement.reward.gold }}
                </text>
                <text class="reward-text" v-if="achievement.reward.experienceBonus">
                  <text class="reward-icon">⭐</text> +{{ achievement.reward.experienceBonus }}%
                </text>
                <text class="reward-text" v-if="achievement.reward.title">
                  <text class="reward-icon">👑</text> {{ achievement.reward.title }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      player: {
        level: 1,
        exp: 0,
        class: '',
        baseAttack: 10,
        baseDefense: 5,
        baseMaxHp: 100,
        baseMagicAttack: 10,
        baseAgility: 10,
        attack: 10,
        defense: 5,
        hp: 100,
        maxHp: 100,
        magicAttack: 10,
        magicDefense: 5,
        agility: 10,
        critRate: 0.05,
        critDamage: 1.5,
        cooldownReduction: 0,
        manaRegen: 1,
        talentPoints: 0,
        talents: {
          warrior: {},
          mage: {},
          assassin: {}
        },
        gold: 0,
        inventory: [],
        equipment: [
          { type: '头盔', item: null },
          { type: '武器', item: null },
          { type: '护甲', item: null },
          { type: '饰品', item: null }
        ],
        skills: [],
        skillPoints: 0,
        experienceBonus: 0,
        goldBonus: 0,
        killCount: 0,
        achievements: [],
        titles: [],
        activeTitle: null,
        craftCount: 0,
        dragonKills: 0,
        achievementPoints: 0,
        craftBonus: 0
      },
      currentMonster: null,
      skillCooldown: 0,
      isInventoryOpen: false,
      isShopOpen: false,
      isCraftOpen: false,
      isSkillsOpen: false,
      isAchievementsOpen: false,  // 添加这个属性
      showBattleResult: false,
      battleWon: false,
      battleRewards: {
        exp: 0,
        gold: 0,
        items: []
      },
      shopItems: [
        {
          name: '生命药水',
          description: '恢复50点生命值',
          price: 50,
          icon: 'potion.png',
          type: 'consumable',
          effect: { hp: 50 }
        },
        {
          name: '铁剑',
          description: '增加15点攻击力',
          price: 100,
          icon: 'sword.png',
          type: 'equipment',
          slot: '武器',
          stats: { attack: 15 }
        },
        {
          name: '铁甲',
          description: '增加10点防御力',
          price: 100,
          icon: 'armor.png',
          type: 'equipment',
          slot: '护甲',
          stats: { defense: 10 }
        }
      ],
      skills: [
        {
          name: '重击',
          icon: 'heavy_strike.png',
          level: 0,
          maxLevel: 5,
          baseDamage: 20,
          damagePerLevel: 10,
          description: '对敌人造成强力一击',
          class: 'warrior'
        },
        {
          name: '盾牌格挡',
          icon: 'shield_block.png',
          level: 0,
          maxLevel: 5,
          baseDefense: 15,
          defensePerLevel: 8,
          description: '增加防御力，减少受到的伤害',
          class: 'warrior'
        },
        {
          name: '火球术',
          icon: 'fireball.png',
          level: 0,
          maxLevel: 5,
          baseDamage: 30,
          damagePerLevel: 15,
          description: '发射火球造成魔法伤害',
          class: 'mage'
        },
        {
          name: '冰冻术',
          icon: 'frostbolt.png',
          level: 0,
          maxLevel: 5,
          baseDamage: 25,
          damagePerLevel: 12,
          description: '发射冰箭减速敌人',
          class: 'mage'
        },
        {
          name: '背刺',
          icon: 'backstab.png',
          level: 0,
          maxLevel: 5,
          baseDamage: 35,
          damagePerLevel: 18,
          description: '从背后攻击造成高额伤害',
          class: 'assassin'
        },
        {
          name: '毒药',
          icon: 'poison.png',
          level: 0,
          maxLevel: 5,
          baseDamage: 15,
          damagePerLevel: 8,
          description: '使用毒药造成持续伤害',
          class: 'assassin'
        }
      ],
      showDamage: false,
      damageAmount: 0,
      isCritical: false,
      isAttacking: false,
      isUsingSkill: false,
      monsters: [
        { 
          name: '史莱姆', 
          level: 1, 
          hp: 30, 
          maxHp: 30, 
          attack: 5, 
          defense: 2, 
          exp: 20, 
          gold: 10,
          icon: 'slime.png'
        },
        { 
          name: '哥布林', 
          level: 2, 
          hp: 45, 
          maxHp: 45, 
          attack: 8, 
          defense: 3, 
          exp: 30, 
          gold: 15,
          icon: 'goblin.png'
        },
        { 
          name: '骷髅战士', 
          level: 3, 
          hp: 60, 
          maxHp: 60, 
          attack: 12, 
          defense: 5, 
          exp: 40, 
          gold: 20,
          icon: 'skeleton.png'
        },
        { 
          name: '兽人战士', 
          level: 4, 
          hp: 80, 
          maxHp: 80, 
          attack: 15, 
          defense: 8, 
          exp: 50, 
          gold: 25,
          icon: 'orc.png'
        },
        { 
          name: '暗影刺客', 
          level: 5, 
          hp: 70, 
          maxHp: 70, 
          attack: 20, 
          defense: 6, 
          exp: 60, 
          gold: 30,
          icon: 'assassin.png'
        },
        { 
          name: '巨龙幼崽', 
          level: 6, 
          hp: 100, 
          maxHp: 100, 
          attack: 25, 
          defense: 12, 
          exp: 80, 
          gold: 40,
          icon: 'dragon.png'
        }
      ],
      currentCraftCategory: '武器',
      craftCategories: ['武器', '护甲', '饰品', '消耗品'],
      craftRecipes: [
        {
          id: 1,
          category: '武器',
          result: {
            name: '精铁剑',
            description: '由普通铁剑升级而成，攻击力更高',
            icon: 'iron_sword_plus.png',
            type: 'equipment',
            slot: '武器',
            stats: { attack: 25 }
          },
          materials: [
            { id: 'iron_sword', icon: 'sword.png', count: 1 },
            { id: 'iron_ore', icon: 'iron_ore.png', count: 3 }
          ]
        },
        {
          id: 2,
          category: '护甲',
          result: {
            name: '精铁甲',
            description: '由普通铁甲升级而成，防御力更高',
            icon: 'iron_armor_plus.png',
            type: 'equipment',
            slot: '护甲',
            stats: { defense: 18 }
          },
          materials: [
            { id: 'iron_armor', icon: 'armor.png', count: 1 },
            { id: 'iron_ore', icon: 'iron_ore.png', count: 3 }
          ]
        },
        {
          id: 3,
          category: '消耗品',
          result: {
            name: '高级生命药水',
            description: '恢复100点生命值',
            icon: 'potion_plus.png',
            type: 'consumable',
            effect: { hp: 100 }
          },
          materials: [
            { id: 'potion', icon: 'potion.png', count: 2 },
            { id: 'herb', icon: 'herb.png', count: 3 }
          ]
        }
      ],
      isMonsterHit: false,
      isMonsterDying: false,
      showSkillEffect: false,
      currentSkillEffect: '',
      isPlayerAttacking: false,
      isPlayerHit: false,
      isMonsterAttacking: false,
      showPlayerEffect: false,
      showMonsterEffect: false,
      achievements: [
        {
          id: 'first_blood',
          name: '初次击杀',
          description: '击杀第一个怪物',
          icon: 'sword.png',
          condition: player => player.killCount >= 1,
          reward: { gold: 100, title: '见习战士' }
        },
        {
          id: 'monster_hunter',
          name: '怪物猎人',
          description: '击杀100个怪物',
          icon: 'monster_hunter.png',
          condition: player => player.killCount >= 100,
          reward: { gold: 1000, title: '老练猎手', experienceBonus: 10 }
        },
        {
          id: 'rich_adventurer',
          name: '富有冒险家',
          description: '累积1000金币',
          icon: 'gold.png',
          condition: player => player.gold >= 1000,
          reward: { title: '富豪', goldBonus: 10 }
        },
        {
          id: 'master_crafter',
          name: '工匠大师',
          description: '完成10次物品合成',
          icon: 'anvil.png',
          condition: player => player.craftCount >= 10,
          reward: { gold: 500, title: '工匠', craftBonus: 20 }
        },
        {
          id: 'skill_master',
          name: '技能大师',
          description: '将一个技能升级到最高等级',
          icon: 'skills.png',
          condition: player => player.skills.some(skill => skill.level >= skill.maxLevel),
          reward: { skillPoints: 2, title: '技能大师' }
        },
        {
          id: 'dragon_slayer',
          name: '屠龙者',
          description: '击杀巨龙',
          icon: 'dragon.png',
          condition: player => player.dragonKills >= 1,
          reward: { gold: 2000, title: '屠龙者', attack: 20 }
        }
      ],
      monsterImages: {
        'slime.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/slime.svg',
        'goblin.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/goblin-head.svg',
        'skeleton.png': 'https://cdn-icons-png.flaticon.com/512/3334/3334135.png',
        'orc.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/orc-head.svg',
        'assassin.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/hood.svg',
        'dragon.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dragon-head.svg'
      },
      itemImages: {
        'potion.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/potion-ball.svg',
        'sword.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/sword.svg',
        'armor.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/leather-armor.svg',
        'iron_sword_plus.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/broadsword.svg',
        'iron_armor_plus.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/plate-armor.svg',
        'potion_plus.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/magic-potion.svg',
        'iron_ore.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/mineral.svg',
        'herb.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/herbs-bundle.svg',
        'monster_hunter.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/monster-grasp.svg',
        'gold.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/coins.svg',
        'skills.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/skills.svg'
      },
      skillImages: {
        'heavy_strike.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/sword-brandish.svg',
        'shield_block.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/shield.svg',
        'fireball.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/fireball.svg',
        'frostbolt.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/ice-bolt.svg',
        'backstab.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/backstab.svg',
        'poison.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/poison-bottle.svg',
        'heal.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/healing.svg',
        'combo.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/crossed-swords.svg',
        'warrior.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/barbarian.svg',
        'mage.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/wizard-face.svg',
        'assassin.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/ninja-head.svg',
        'strength.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/muscle-up.svg',
        'defense.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/shield.svg',
        'health.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/heart-plus.svg',
        'magic.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/magic-swirl.svg',
        'cooldown.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/hourglass.svg',
        'mana.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/crystal-growth.svg',
        'agility.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/running-ninja.svg',
        'crit.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/bullseye.svg',
        'critdmg.png': 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/sword-wound.svg'
      },
      isClassSelectOpen: false,
      classes: [
        { id: 'warrior', name: '战士', description: '近战攻击型角色', stats: ['高攻击力', '高防御力'], icon: 'warrior.png' },
        { id: 'mage', name: '法师', description: '远程魔法型角色', stats: ['高魔法攻击力', '低防御力'], icon: 'mage.png' },
        { id: 'assassin', name: '刺客', description: '敏捷型角色', stats: ['高敏捷', '高暴击率'], icon: 'assassin.png' }
      ],
      isTalentOpen: false,
      currentTalentTab: 'warrior',
      talentTabs: [
        { id: 'warrior', name: '战士天赋' },
        { id: 'mage', name: '法师天赋' },
        { id: 'assassin', name: '刺客天赋' }
      ],
      currentTalentTab: 'warrior',
      talentData: {
        warrior: [
          {
            name: '力量强化',
            description: '增加基础攻击力',
            maxLevel: 5,
            icon: 'strength.png',
            effect: (level) => ({ attack: level * 5 })
          },
          {
            name: '防御精通',
            description: '增加基础防御力',
            maxLevel: 5,
            icon: 'defense.png',
            effect: (level) => ({ defense: level * 5 })
          },
          {
            name: '战斗意志',
            description: '增加生命值上限',
            maxLevel: 5,
            icon: 'health.png',
            effect: (level) => ({ maxHp: level * 20 })
          }
        ],
        mage: [
          {
            name: '魔力强化',
            description: '增加魔法攻击力',
            maxLevel: 5,
            icon: 'magic.png',
            effect: (level) => ({ magicAttack: level * 5 })
          },
          {
            name: '法术精通',
            description: '减少技能冷却时间',
            maxLevel: 5,
            icon: 'cooldown.png',
            effect: (level) => ({ cooldownReduction: level * 0.05 })
          },
          {
            name: '魔力回复',
            description: '增加魔法值回复速度',
            maxLevel: 5,
            icon: 'mana.png',
            effect: (level) => ({ manaRegen: level * 2 })
          }
        ],
        assassin: [
          {
            name: '敏捷强化',
            description: '增加敏捷度',
            maxLevel: 5,
            icon: 'agility.png',
            effect: (level) => ({ agility: level * 5 })
          },
          {
            name: '暴击精通',
            description: '增加暴击率',
            maxLevel: 5,
            icon: 'crit.png',
            effect: (level) => ({ critRate: level * 0.02 })
          },
          {
            name: '致命一击',
            description: '增加暴击伤害',
            maxLevel: 5,
            icon: 'critdmg.png',
            effect: (level) => ({ critDamage: level * 0.1 })
          }
        ]
      }
    }
  },
  computed: {
    filteredRecipes() {
      return this.craftRecipes.filter(recipe => recipe.category === this.currentCraftCategory);
    },
    currentTalents() {
      return this.talentData[this.currentTalentTab] || [];
    }
  },
  methods: {
    nextLevelExp() {
      return this.player.level * 100;
    },
    startBattle() {
      const availableMonsters = this.monsters.filter(m => m.level <= this.player.level + 2);
      const randomIndex = Math.floor(Math.random() * availableMonsters.length);
      this.currentMonster = { ...availableMonsters[randomIndex] };
    },
    attack() {
      if (!this.currentMonster || this.isAttacking) return;
      
      this.isAttacking = true;
      this.isPlayerAttacking = true;
      this.showPlayerEffect = true;
      
      // 播放攻击动画
      setTimeout(() => {
        this.isMonsterHit = true;
        this.showPlayerEffect = false;
        
        // 暴击判定
        const isCritical = Math.random() < 0.2;
        const criticalMultiplier = isCritical ? 2 : 1;
        
        // 玩家攻击
        const playerDamage = Math.max(0, this.player.attack - this.currentMonster.defense) * criticalMultiplier;
        this.currentMonster.hp = Math.max(0, this.currentMonster.hp - playerDamage);
        this.showDamageNumber(playerDamage, isCritical);
        
        setTimeout(() => {
          this.isPlayerAttacking = false;
          this.isMonsterHit = false;
          
          // 怪物反击
          if (this.currentMonster.hp > 0) {
            this.monsterAttack();
          } else {
            this.isMonsterDying = true;
            setTimeout(() => {
              this.isAttacking = false;
              this.isMonsterDying = false;
              this.checkBattleResult();
            }, 500);
          }
        }, 300);
      }, 250);
    },
    monsterAttack() {
      this.isMonsterAttacking = true;
      this.showMonsterEffect = true;
      
      setTimeout(() => {
        this.isPlayerHit = true;
        this.showMonsterEffect = false;
        
        const monsterDamage = Math.max(0, this.currentMonster.attack - this.player.defense);
        this.player.hp = Math.max(0, this.player.hp - monsterDamage);
        this.showDamageNumber(monsterDamage, false, true);
        
        setTimeout(() => {
          this.isMonsterAttacking = false;
          this.isPlayerHit = false;
          this.isAttacking = false;
          this.checkBattleResult();
        }, 300);
      }, 250);
    },
    showDamageNumber(amount, isCritical, isMonsterAttack = false) {
      this.damageAmount = amount;
      this.isCritical = isCritical;
      this.showDamage = true;
      
      setTimeout(() => {
        this.showDamage = false;
      }, 1000);
    },
    getCurrentSkillName() {
      const activeSkill = this.skills.find(skill => skill.level > 0);
      return activeSkill ? activeSkill.name : '技能';
    },
    useSkill() {
      if (this.skillCooldown > 0 || !this.currentMonster || this.isUsingSkill) {
        if (this.skillCooldown > 0) {
          uni.showToast({
            title: `技能冷却中(${this.skillCooldown}s)`,
            icon: 'none',
            duration: 1500
          });
        }
        return;
      }
      
      // 检查是否有已学习的技能
      const activeSkill = this.skills.find(skill => skill.level > 0);
      if (!activeSkill) {
        uni.showToast({
          title: '请先学习技能',
          icon: 'none',
          duration: 1500
        });
        return;
      }

      this.isUsingSkill = true;
      this.showPlayerEffect = true;
      this.currentSkillEffect = activeSkill.name === '重击' ? 'heavy-strike' : 
                               activeSkill.name === '连击' ? 'combo' : 'heal';
      
      let skillDamage = 0;
      if (activeSkill.name === '重击') {
        skillDamage = activeSkill.baseDamage + (activeSkill.level - 1) * activeSkill.damagePerLevel;
      } else if (activeSkill.name === '连击') {
        const hits = activeSkill.baseHits + (activeSkill.level - 1) * activeSkill.hitsPerLevel;
        skillDamage = this.player.attack * hits * 0.6; // 每次打击造成60%攻击力的伤害
      } else if (activeSkill.name === '快速恢复') {
        const healAmount = activeSkill.baseHeal + (activeSkill.level - 1) * activeSkill.healPerLevel;
        this.player.hp = Math.min(this.player.maxHp, this.player.hp + healAmount);
        uni.showToast({
          title: `恢复${healAmount}点生命值`,
          icon: 'none',
          duration: 1500
        });
      }
      
      setTimeout(() => {
        this.isMonsterHit = true;
        this.showPlayerEffect = false;
        this.showSkillEffect = true;
        
        setTimeout(() => {
          this.showSkillEffect = false;
          this.currentMonster.hp = Math.max(0, this.currentMonster.hp - skillDamage);
          this.showDamageNumber(skillDamage, true, false, true);
          this.skillCooldown = 5;
          
          // 显示技能使用成功提示
          uni.showToast({
            title: `${activeSkill.name}造成${skillDamage}伤害`,
            icon: 'none',
            duration: 1500
          });
          
          const timer = setInterval(() => {
            this.skillCooldown--;
            if (this.skillCooldown <= 0) {
              clearInterval(timer);
              // 显示技能就绪提示
              uni.showToast({
                title: '技能已就绪',
                icon: 'none',
                duration: 1500
              });
            }
          }, 1000);
          
          this.isMonsterHit = false;
          this.isUsingSkill = false;
          this.checkBattleResult();
        }, 400);
      }, 400);
    },
    checkBattleResult() {
      if (this.currentMonster.hp <= 0) {
        this.battleWon = true;
        
        // 更新击杀统计
        this.player.killCount++;
        if (this.currentMonster.name === '巨龙幼崽') {
          this.player.dragonKills++;
        }
        
        // 计算奖励
        const goldBonus = Math.floor(this.currentMonster.gold * (this.player.goldBonus / 100));
        const expBonus = Math.floor(this.currentMonster.exp * (this.player.experienceBonus / 100));
        
        this.battleRewards = {
          exp: this.currentMonster.exp + expBonus,
          gold: this.currentMonster.gold + goldBonus,
          items: []
        };
        
        // 随机掉落物品
        if (Math.random() < 0.3) {
          const randomItem = this.shopItems[Math.floor(Math.random() * this.shopItems.length)];
          this.battleRewards.items.push({ ...randomItem });
        }
        
        this.player.exp += this.battleRewards.exp;
        this.player.gold += this.battleRewards.gold;
        
        // 检查升级和成就
        if (this.player.exp >= this.nextLevelExp()) {
          this.levelUp();
        }
        this.checkAchievements();
        
        this.showBattleResult = true;
        this.currentMonster = null;
      } else if (this.player.hp <= 0) {
        this.player.hp = Math.floor(this.player.maxHp * 0.3);
        this.battleWon = false;
        this.showBattleResult = true;
        this.currentMonster = null;
      }
    },
    levelUp() {
      this.player.level++;
      this.player.exp = 0;
      this.player.maxHp += 20;
      this.player.hp = this.player.maxHp;
      this.player.attack += 5;
      this.player.defense += 3;
      this.player.skillPoints++;
      
      uni.showToast({
        title: '升级了！',
        icon: 'success'
      });
    },
    getItemStats(item) {
      if (item.type === 'equipment') {
        return Object.entries(item.stats)
          .map(([stat, value]) => `${stat}: +${value}`)
          .join(', ');
      }
      return item.description;
    },
    useItem(index) {
      const item = this.player.inventory[index];
      if (item.type === 'consumable') {
        if (item.effect.hp) {
          this.player.hp = Math.min(this.player.maxHp, this.player.hp + item.effect.hp);
        }
        this.player.inventory.splice(index, 1);
      } else if (item.type === 'equipment') {
        this.equipItem(item, index);
      }
    },
    equipItem(item, inventoryIndex) {
      const slotIndex = this.player.equipment.findIndex(slot => slot.type === item.slot);
      if (slotIndex !== -1) {
        // 卸下当前装备
        const currentEquip = this.player.equipment[slotIndex].item;
        if (currentEquip) {
          this.unequipItem(slotIndex);
        }
        
        // 装备新物品
        this.player.equipment[slotIndex].item = item;
        this.player.inventory.splice(inventoryIndex, 1);
        
        // 应用装备属性
        Object.entries(item.stats).forEach(([stat, value]) => {
          this.player[stat] += value;
        });
      }
    },
    unequipItem(slotIndex) {
      const equipment = this.player.equipment[slotIndex];
      if (equipment.item) {
        // 移除装备属性
        Object.entries(equipment.item.stats).forEach(([stat, value]) => {
          this.player[stat] -= value;
        });
        
        // 将装备移回背包
        this.player.inventory.push(equipment.item);
        equipment.item = null;
      }
    },
    buyItem(index) {
      const item = this.shopItems[index];
      if (this.player.gold >= item.price) {
        this.player.gold -= item.price;
        this.player.inventory.push({ ...item });
        uni.showToast({
          title: '购买成功！',
          icon: 'success'
        });
      }
    },
    upgradeSkill(index) {
      const skill = this.skills[index];
      if (this.player.skillPoints > 0 && skill.level < skill.maxLevel) {
        skill.level++;
        this.player.skillPoints--;
      }
    },
    getSkillDescription(skill) {
      if (skill.name === '重击') {
        const damage = skill.baseDamage + (skill.level - 1) * skill.damagePerLevel;
        return `${skill.description}，造成${damage}点伤害`;
      } else if (skill.name === '快速恢复') {
        const heal = skill.baseHeal + (skill.level - 1) * skill.healPerLevel;
        return `${skill.description}，恢复${heal}点生命值`;
      }
      return skill.description;
    },
    openInventory() {
      this.isInventoryOpen = true;
    },
    closeInventory() {
      this.isInventoryOpen = false;
    },
    openShop() {
      this.isShopOpen = true;
    },
    closeShop() {
      this.isShopOpen = false;
    },
    openCraft() {
      this.isCraftOpen = true;
    },
    closeCraft() {
      this.isCraftOpen = false;
    },
    closeBattleResult() {
      this.showBattleResult = false;
      if (this.battleWon) {
        // 胜利时添加物品
        this.battleRewards.items.forEach(item => {
          this.player.inventory.push(item);
        });
      } else {
        // 失败时自动开始新的战斗
        this.startBattle();
      }
    },
    compareEquipment(newItem) {
      if (newItem.type !== 'equipment') return null;
      
      const currentEquipment = this.player.equipment.find(slot => slot.type === newItem.slot)?.item;
      if (!currentEquipment) return 'better';
      
      const stats = Object.keys(newItem.stats);
      let isBetter = false;
      let isWorse = false;
      
      stats.forEach(stat => {
        if (newItem.stats[stat] > currentEquipment.stats[stat]) {
          isBetter = true;
        } else if (newItem.stats[stat] < currentEquipment.stats[stat]) {
          isWorse = true;
        }
      });
      
      if (isBetter && !isWorse) return 'better';
      if (isWorse && !isBetter) return 'worse';
      return null;
    },
    hasEquipment(type) {
      return this.player.equipment.find(slot => slot.type === type)?.item !== null;
    },
    getEquipmentByType(type) {
      return this.player.equipment.find(slot => slot.type === type)?.item;
    },
    getMaterialCount(materialId) {
      return this.player.inventory.filter(item => item.id === materialId).length;
    },
    hasSufficientMaterial(material) {
      return this.getMaterialCount(material.id) >= material.count;
    },
    canCraftItem(recipe) {
      return recipe.materials.every(material => this.hasSufficientMaterial(material));
    },
    craftItem(recipe) {
      if (!this.canCraftItem(recipe)) return;
      
      // 消耗材料
      recipe.materials.forEach(material => {
        for (let i = 0; i < material.count; i++) {
          const index = this.player.inventory.findIndex(item => item.id === material.id);
          if (index !== -1) {
            this.player.inventory.splice(index, 1);
          }
        }
      });
      
      // 添加成品到背包
      this.player.inventory.push({...recipe.result});
      
      // 增加合成次数并检查成就
      this.player.craftCount++;
      this.checkAchievements();
      
      uni.showToast({
        title: '合成成功！',
        icon: 'success'
      });
    },
    openSkills() {
      this.isSkillsOpen = true;
    },
    closeSkills() {
      this.isSkillsOpen = false;
    },
    checkAchievements() {
      this.achievements.forEach(achievement => {
        if (!this.player.achievements.includes(achievement.id) && achievement.condition(this.player)) {
          this.unlockAchievement(achievement);
        }
      });
    },
    unlockAchievement(achievement) {
      this.player.achievements.push(achievement.id);
      this.player.titles.push(achievement.reward.title);
      
      // 应用成就奖励
      if (achievement.reward.gold) this.player.gold += achievement.reward.gold;
      if (achievement.reward.experienceBonus) this.player.experienceBonus += achievement.reward.experienceBonus;
      if (achievement.reward.criticalDamage) this.player.criticalDamage += achievement.reward.criticalDamage;
      
      uni.showToast({
        title: `解锁成就：${achievement.name}`,
        icon: 'success',
        duration: 2000
      });
    },
    calculateCritical() {
      return Math.random() * 100 < this.player.criticalRate;
    },
    calculateDamage(baseDamage, isCritical) {
      let damage = baseDamage;
      if (isCritical) {
        damage *= this.player.criticalDamage / 100;
      }
      return Math.floor(damage);
    },
    gainExperience(baseExp) {
      const bonusExp = Math.floor(baseExp * (1 + this.player.experienceBonus / 100));
      this.player.exp += bonusExp;
      return bonusExp;
    },
    gainGold(baseGold) {
      const bonusGold = Math.floor(baseGold * (1 + this.player.goldBonus / 100));
      this.player.gold += bonusGold;
      return bonusGold;
    },
    getMonsterImage(icon) {
      return this.monsterImages[icon] || '';
    },
    getItemImage(icon) {
      return this.itemImages[icon] || '';
    },
    getSkillImage(icon) {
      return this.skillImages[icon] || '';
    },
    selectClass(classId) {
      this.player.class = classId;
    },
    confirmClass() {
      this.isClassSelectOpen = false;
    },
    isTalentMaxed(talent) {
      return this.player.talents[this.player.class][talent.name] >= talent.maxLevel;
    },
    getTalentLevel(talent) {
      return this.player.talents[this.player.class][talent.name];
    },
    getTalentDescription(talent) {
      return talent.description;
    },
    canLearnTalent(talent) {
      return this.player.talentPoints > 0 && !this.isTalentMaxed(talent);
    },
    learnTalent(talent) {
      if (!this.canLearnTalent(talent)) return;
      
      this.player.talentPoints--;
      this.player.talents[this.player.class][talent.name]++;
      
      uni.showToast({
        title: `学习了天赋：${talent.name}`,
        icon: 'success',
        duration: 2000
      });
    },
    closeTalents() {
      this.isTalentOpen = false;
    },
    openClassSelect() {
      this.isClassSelectOpen = true;
    },
    openTalents() {
      this.isTalentOpen = true;
      this.currentTalentTab = this.player.class;
    },
    getTalentIcon(talent) {
      return this.skillImages[talent.icon] || '';
    },
    applyTalentEffects() {
      // 重置属性
      this.player.attack = this.player.baseAttack;
      this.player.defense = this.player.baseDefense;
      this.player.maxHp = this.player.baseMaxHp;
      this.player.magicAttack = this.player.baseMagicAttack;
      this.player.agility = this.player.baseAgility;
      
      // 应用天赋效果
      Object.entries(this.player.talents[this.player.class]).forEach(([talentName, level]) => {
        const talent = this.talentData[this.player.class].find(t => t.name === talentName);
        if (talent && level > 0) {
          const effects = talent.effect(level);
          Object.entries(effects).forEach(([stat, value]) => {
            if (this.player[stat] !== undefined) {
              this.player[stat] += value;
            }
          });
        }
      });
    },
    openAchievements() {
      this.isAchievementsOpen = true;
    },
    closeAchievements() {
      this.isAchievementsOpen = false;
    },
    getAchievementIcon(achievement) {
      return this.itemImages[achievement.icon] || '';
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #1a1a1a;
  min-height: 100vh;
  color: #fff;
}

.status-bar {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 15rpx;
  padding: 20rpx;
  margin: 0 auto 20rpx;
  width: 95%;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  align-items: center;
}

.level-info {
  width: 100%;
  text-align: center;
}

.level-text {
  font-size: 32rpx;
  color: #ffd700;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  margin-bottom: 8rpx;
}

.exp-bar {
  width: 100%;
  height: 20rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
}

.exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16rpx;
  color: #fff;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.8);
}

.hp-info {
  width: 100%;
  text-align: center;
}

.hp-bar {
  width: 100%;
  height: 24rpx;
  background: rgba(255, 0, 0, 0.2);
  border-radius: 12rpx;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ff6666);
  border-radius: 12rpx;
  transition: width 0.3s ease;
}

.player-stats {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 10rpx;
}

.stat {
  font-size: 28rpx;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.stat.gold {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.2);
}

.battle-area {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx auto;
  width: 95%;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.5);
}

.monster-info {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.monster-name {
  font-size: 36rpx;
  color: #ffd700;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  margin-bottom: 15rpx;
  display: block;
  text-align: center;
  font-weight: bold;
}

.monster-hp-bar {
  margin: 15rpx 0;
}

.hp-text {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 8rpx;
  display: block;
  text-align: center;
}

.hp-bar-bg {
  width: 100%;
  height: 30rpx;
  background: rgba(255, 0, 0, 0.2);
  border-radius: 15rpx;
  overflow: hidden;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ff6666);
  border-radius: 15rpx;
  transition: width 0.3s ease;
}

.monster-stats-row {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-top: 15rpx;
}

.monster-stat {
  font-size: 28rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  padding: 8rpx 20rpx;
  border-radius: 10rpx;
}

.battle-field {
  height: 300rpx;
  margin: 20rpx 0;
  position: relative;
  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
  border-radius: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.battle-decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.decoration {
  position: absolute;
}

.left-rocks {
  left: 0;
  bottom: 0;
  width: 120rpx;
  height: 80rpx;
  background: linear-gradient(45deg, #333, #444);
  border-radius: 10rpx;
  transform: skew(-15deg);
}

.right-rocks {
  right: 0;
  bottom: 0;
  width: 120rpx;
  height: 80rpx;
  background: linear-gradient(-45deg, #333, #444);
  border-radius: 10rpx;
  transform: skew(15deg);
}

.ground-texture {
  bottom: 0;
  left: 0;
  right: 0;
  height: 60rpx;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
}

.battle-positions {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100rpx;
}

.player-position, .monster-position {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-shadow {
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  height: 20rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(2rpx);
}

.player-character, .monster-character {
  position: relative;
  width: 140rpx;
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

.character-sprite, .monster-sprite {
  width: 120rpx;
  height: 120rpx;
  object-fit: contain;
  z-index: 1;
  image-rendering: pixelated;
}

.player-attack {
  animation: playerAttack 0.5s ease-in-out;
}

.monster-hit {
  animation: monsterHit 0.3s ease-in-out;
}

@keyframes monsterHit {
  0% { transform: translateX(0) scale(1); filter: brightness(1); }
  25% { transform: translateX(10rpx) scale(1.1); filter: brightness(1.5); }
  50% { transform: translateX(-10rpx) scale(0.9); filter: brightness(1.2); }
  75% { transform: translateX(5rpx) scale(1.05); filter: brightness(1.3); }
  100% { transform: translateX(0) scale(1); filter: brightness(1); }
}

.battle-controls {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  gap: 20rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15rpx;
  margin-top: 20rpx;
}

.battle-btn {
  flex: 1;
  height: 100rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
}

.attack {
  background: linear-gradient(135deg, #ff4444, #ff6666);
  box-shadow: 0 4rpx 15rpx rgba(255, 68, 68, 0.4);
}

.skill {
  background: linear-gradient(135deg, #4444ff, #6666ff);
  box-shadow: 0 4rpx 15rpx rgba(68, 68, 255, 0.4);
}

.btn-text {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.cooldown-text {
  font-size: 28rpx;
  color: #ff4444;
  margin-top: 8rpx;
  text-shadow: 0 0 8rpx rgba(255, 68, 68, 0.5);
}

.ready-text {
  font-size: 28rpx;
  color: #4CAF50;
  margin-top: 8rpx;
  text-shadow: 0 0 8rpx rgba(76, 175, 80, 0.5);
}

.battle-btn:disabled {
  background: linear-gradient(135deg, #444, #666);
  box-shadow: none;
  opacity: 0.7;
}

.battle-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.skill-active {
  animation: skillPulse 0.3s ease-in-out;
  background: linear-gradient(135deg, #6666ff, #8888ff);
}

@keyframes skillPulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

.action-buttons {
  margin-bottom: 30rpx;
}

.btn-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.game-btn {
  width: 48%;
  height: 160rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 10rpx;
}

.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 80vh;
  background: #2a2a2a;
  border-radius: 20rpx;
  padding: 30rpx;
  z-index: 100;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.panel-title {
  font-size: 32rpx;
  font-weight: bold;
}

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.equip-slot {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rpx;
  padding: 10rpx;
  text-align: center;
}

.inventory-items, .shop-items, .skills-grid {
  max-height: 50vh;
  overflow-y: auto;
}

.inventory-item, .shop-item, .skill-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.item-icon, .skill-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.item-info, .skill-info {
  flex: 1;
}

.item-name, .skill-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 6rpx;
}

.item-stats, .item-desc, .skill-desc {
  font-size: 24rpx;
  color: #999;
}

.use-btn, .buy-btn, .upgrade-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  background: #4CAF50;
  color: white;
  border-radius: 6rpx;
}

.close-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #ff4444;
  color: white;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.battle-result {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.result-content {
  background: #2a2a2a;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 80%;
  text-align: center;
}

.result-title {
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.rewards {
  margin: 20rpx 0;
}

.rewards text {
  display: block;
  margin: 10rpx 0;
  color: #ffeb3b;
}

.confirm-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #4CAF50;
  color: white;
  border-radius: 10rpx;
  margin: 20rpx auto 0;
}

.damage-numbers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.damage-text {
  font-size: 48rpx;
  color: #ff4444;
  font-weight: bold;
  animation: damageFloat 1s ease-out;
  text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.5);
}

.critical {
  color: #ff0000;
  font-size: 64rpx;
  animation: criticalDamage 1s ease-out;
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100rpx);
  }
}

@keyframes criticalDamage {
  0% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-100rpx);
  }
}

.attacking {
  animation: attackShake 0.5s ease-in-out;
}

@keyframes attackShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10rpx); }
  75% { transform: translateX(10rpx); }
}

.better-stats {
  color: #4CAF50;
  font-weight: bold;
}

.worse-stats {
  color: #ff4444;
  font-weight: bold;
}

.better-item {
  background: #2E7D32;
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 5rpx #4CAF50; }
  50% { box-shadow: 0 0 15rpx #4CAF50; }
  100% { box-shadow: 0 0 5rpx #4CAF50; }
}

.craft-categories {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10rpx;
}

.category-tab {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  transition: all 0.3s;
}

.category-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.craft-recipes {
  max-height: 50vh;
  overflow-y: auto;
}

.craft-recipe {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.recipe-result {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.recipe-materials {
  display: flex;
  gap: 15rpx;
  margin-bottom: 15rpx;
}

.material-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 10rpx;
  border-radius: 6rpx;
}

.material-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 5rpx;
}

.material-count {
  font-size: 20rpx;
  color: #fff;
}

.material-insufficient {
  opacity: 0.5;
}

.material-insufficient .material-count {
  color: #ff4444;
}

.craft-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  background: #4CAF50;
  color: white;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.craft-btn:disabled {
  background: #666;
  opacity: 0.5;
}

.hp-bar {
  margin: 10rpx 0;
}

.hp-text {
  font-size: 24rpx;
  color: #fff;
  margin-bottom: 5rpx;
}

.player-skill {
  animation: skillAttack 0.8s ease-in-out;
}

.skill-slash {
  background: linear-gradient(45deg, transparent 45%, #4444ff 50%, transparent 55%);
  animation: skillSlash 0.8s ease-out;
}

.skill-damage {
  color: #4444ff;
  font-size: 56rpx;
  text-shadow: 0 0 10rpx rgba(68, 68, 255, 0.5);
}

@keyframes skillAttack {
  0% { transform: translateX(0); }
  25% { transform: translateX(50rpx) scale(1.1); }
  50% { transform: translateX(100rpx) scale(1.2); }
  75% { transform: translateX(50rpx) scale(1.1); }
  100% { transform: translateX(0); }
}

@keyframes skillSlash {
  0% { 
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    filter: brightness(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.5) rotate(0deg);
    filter: brightness(2);
  }
  100% { 
    opacity: 0;
    transform: scale(2) rotate(45deg);
    filter: brightness(1);
  }
}

.attack-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.player-effect {
  right: -100%;
  animation: slashEffect 0.3s ease-out;
  background: linear-gradient(45deg, #fff 50%, transparent 55%);
  filter: drop-shadow(0 0 5rpx rgba(255, 255, 255, 0.8));
}

.monster-effect {
  left: -100%;
  animation: slashEffect 0.3s ease-out;
  background: linear-gradient(-45deg, transparent 45%, #ff4444 50%, transparent 55%);
  filter: drop-shadow(0 0 5rpx rgba(255, 68, 68, 0.8));
}

@keyframes slashEffect {
  0% { 
    opacity: 0;
    transform: scale(0) rotate(0deg);
    filter: brightness(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2) rotate(15deg);
    filter: brightness(2);
  }
  100% { 
    opacity: 0;
    transform: scale(2) rotate(30deg);
    filter: brightness(1);
  }
}

.skill-points {
  font-size: 28rpx;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx 0;
}

.skill-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rpx;
  padding: 20rpx;
}

.skill-icon-wrapper {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-max {
  background: linear-gradient(135deg, #ffd700, #ffa500);
}

.skill-icon {
  width: 60rpx;
  height: 60rpx;
}

.skill-level {
  position: absolute;
  bottom: -10rpx;
  right: -10rpx;
  background: #4CAF50;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
}

.skill-info {
  flex: 1;
  margin-right: 20rpx;
}

.skill-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 6rpx;
}

.skill-desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.skill-level-text {
  font-size: 22rpx;
  color: #4CAF50;
}

.upgrade-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  background: #4CAF50;
  color: white;
  border-radius: 6rpx;
}

.btn-disabled {
  background: #666;
  opacity: 0.5;
}

/* 职业选择面板样式 */
.class-select {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  padding: 20px;
  z-index: 1000;
}

.class-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.class-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.class-option:hover {
  border-color: #666;
  background: rgba(255, 255, 255, 0.1);
}

.class-option.selected {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.class-icon {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.class-info {
  flex: 1;
}

.class-name {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.class-desc {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
}

.class-stats {
  display: flex;
  gap: 10px;
}

.stat-text {
  font-size: 12px;
  color: #888;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

/* 天赋树面板样式 */
.talents {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  height: 80vh;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  padding: 20px;
  z-index: 1000;
  overflow-y: auto;
}

.talent-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}

.tab-item {
  padding: 8px 15px;
  color: #aaa;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tab-item.active {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.talent-node {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.talent-node.available:hover {
  background: rgba(255, 255, 255, 0.1);
}

.talent-node.maxed {
  border: 1px solid #ffd700;
}

.talent-node.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.talent-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.talent-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.talent-level {
  font-size: 12px;
  color: #ffd700;
  margin-bottom: 5px;
}

.talent-desc {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 10px;
}

.learn-btn {
  width: 100%;
  padding: 8px;
  background: #ffd700;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.learn-btn:hover:not(:disabled) {
  background: #ffed4a;
}

.learn-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 15px;
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.close-btn:hover {
  border-color: #666;
  background: rgba(255, 255, 255, 0.1);
}

/* 技能面板样式更新 */
.skills {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

.panel-header {
  padding: 20rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.skills-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}

.panel-footer {
  padding: 20rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
}

.close-btn {
  position: static;
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #ff4444;
  color: white;
  border-radius: 10rpx;
  text-align: center;
}

.skill-points {
  background: rgba(76, 175, 80, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  color: #4CAF50;
}

.skill-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.achievements {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 85vh;
  background: #1a1a1a;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
}

.achievements-list {
  flex: 1;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 修改为固定2列 */
  gap: 30rpx;
  padding: 10rpx;
  width: 100%;
  box-sizing: border-box;
}

.achievement-item {
  width: 100%;
  background: #2a2a2a;
  border-radius: 15rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.achievement-content {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  height: 100%;
  box-sizing: border-box;
}

.achievement-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.achievement-icon-wrapper {
  width: 60rpx;
  height: 60rpx;
  position: relative;
}

.achievement-icon {
  width: 100%;
  height: 100%;
}

.achievement-complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 24rpx;
  font-weight: bold;
}

.achievement-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 5rpx;
}

.achievement-desc {
  font-size: 24rpx;
  color: #aaa;
  margin-bottom: 10rpx;
}

.achievement-rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.reward-text {
  font-size: 24rpx;
  color: #ffeb3b;
  margin-bottom: 5rpx;
}

.achievement-stats {
  font-size: 28rpx;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 40rpx;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 0;
  border: none;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style> 